<!-- 员工画像 -->
<template>
    <div class="page">
        <div class="head">
            <!-- <Title></Title> -->
            <div class="search">
                <van-search v-model="keyword" show-action @search="handleInput" shape="round" background="#3975C6"
                    placeholder="请输入员工姓名">
                    <template #action>
                        <div @click="handleInput" style="color: #fff;">搜索</div>
                    </template>
                </van-search>
                <van-dropdown-menu direction="up" class="dropdown-menu">
                    <van-dropdown-item ref="fgsref">
                        <template #title>
                            <span>{{ showName.fgsname || '分/子公司' }}</span>
                            <van-icon name="arrow-down" class="cus-icon" />
                        </template>
                        <van-picker title="请选择分/子公司" class="branch-picker" show-toolbar :columns="fgsList"
                            @change="onChangeFgs" @confirm="onSureFgs" @cancel="onCancelFgs" />
                    </van-dropdown-item>
                    <!-- <van-dropdown-item ref="yybref">
            <template #title>
              <span>{{ showName.yybname || '营业部' }}</span>
              <van-icon name="arrow-down" class="cus-icon" />
            </template>
            <van-picker v-if="yybList && yybList.length" title="请选择营业部" show-toolbar :columns="yybList"
              @confirm="onSureYyb" @cancel="onCancelYyb" />
            <van-empty v-else description="暂无数据" />
          </van-dropdown-item> -->
                    <van-dropdown-item ref="bmref">
                        <template #title>
                            <span>{{ showName.bm || '部门' }}</span>
                            <van-icon name="arrow-down" class="cus-icon" />
                        </template>
                        <van-picker title="请选择部门" show-toolbar :columns="deptList" @confirm="onSureBm"
                            @cancel="onCancelBm" />
                    </van-dropdown-item>
                    <van-dropdown-item title="筛选" ref="filterRef" class="filter-dropdown">
                        <template #title>
                            <span @click="handleFilter">
                                {{ coulist.length > 0 ? `已选${coulist.length}` : '筛选' }}
                            </span>
                            <van-icon :name="showFilterPop ? 'arrow-up' : 'arrow-down'"
                                :class="coulist.length > 0 ? 'cus-icon icon-col' : 'cus-icon'" />
                            <!-- <img src="@/assets/img/arrow-down.png" alt=""> -->
                        </template>
                        <timePop ref="timePop" class="reftime-pop" @changeTime="changeTime" :sTime="startTime"
                            :eTime="endTime" @cancel="cancelChangeTime" />
                        <div class="filter-pop">
                            <div class="filter-group">
                                <!-- 人员状态 -->
                                <div class="f-item">
                                    <p class="title">
                                        <span class="name">人员状态</span>
                                    </p>
                                    <div class="btn-list">
                                        <van-button v-for="(item, index) in personStatusList" :key="index"
                                            :class="activePersonStatus == item.value ? 'default-btn active-btn' : 'default-btn'"
                                            @click="handleClickStatus(item)">
                                            {{ item.name }}
                                        </van-button>
                                    </div>
                                </div>
                                <!-- 入职时间 -->
                                <div class="f-item">
                                    <p class="title">
                                        <span class="name">入职时间</span>
                                    </p>
                                    <div class="time-btn-list">
                                        <!-- <van-cell is-link @click="showTimePopup">{{ entryTime }}</van-cell> -->
                                        <van-cell is-link @click="showTimePopup">
                                            {{ entryTime.start || entryTime.end ? `${entryTime.start}~${entryTime.end}`
                                                : '请选择起止时间' }}
                                        </van-cell>
                                        <!-- <timePop ref="timePop" @changeTime="changeTime" :sTime="startTime" :eTime="endTime"
                      @cancel="cancelChangeTime" /> -->
                                    </div>
                                </div>
                                <!-- 选择法人 -->
                                <div class="f-item">
                                    <p class="title">
                                        <span class="name">选择法人</span>
                                    </p>
                                    <div class="person-btn-list">
                                        <van-button v-for="(item, index) in corpList" :key="index"
                                            :class="activeCorpStatus == item.value ? 'default-btn active-btn auto-w' : 'default-btn auto-w'"
                                            @click="handleCropStatus(item)">
                                            {{ item.text || '' }}
                                        </van-button>
                                    </div>
                                </div>
                                <!-- 岗位标签 -->
                                <div class="f-item">
                                    <p class="title">
                                        <span class="name">岗位标签</span>
                                        <span class="more" @click="handleJobMore">更多
                                            <van-icon :name="showJobmore ? 'arrow-up' : 'arrow-down'"
                                                class="cus-icon" />
                                        </span>
                                    </p>
                                    <div
                                        :class="showJobmore ? 'person-btn-list pro-list-auto' : 'person-btn-list job-list'">
                                        <van-button v-for="(item, index) in jobList" :key="index"
                                            :class="activeJob == item.value ? 'default-btn active-btn auto-w' : 'default-btn auto-w'"
                                            @click="handleClickJob(item)">
                                            {{ item.text }}
                                        </van-button>
                                    </div>
                                </div>
                                <!-- 政治面貌 -->
                                <div class="f-item">
                                    <p class="title">
                                        <span class="name">政治面貌</span>
                                        <span class="more" @click="handleProMore">更多
                                            <van-icon :name="showPromore ? 'arrow-up' : 'arrow-down'"
                                                class="cus-icon" />
                                        </span>
                                    </p>
                                    <div
                                        :class="showPromore ? 'person-btn-list pro-list-auto' : 'person-btn-list pro-list'">
                                        <van-button v-for="(item, index) in polfaceList" :key="index"
                                            :class="activePolface == item.value ? 'default-btn active-btn auto-w' : 'default-btn auto-w'"
                                            @click="handlePolface(item)">
                                            {{ item.name }}
                                        </van-button>
                                    </div>
                                </div>
                            </div>
                            <div class="filter-btn">
                                <van-button plain type="info" size="small" @click="reset">重置</van-button>
                                <van-button type="info" size="small" @click="ok">确定</van-button>
                            </div>
                        </div>
                    </van-dropdown-item>
                </van-dropdown-menu>
            </div>
        </div>

        <!-- <van-loading size="24px" style="position: relative;top: 3%;" v-if="listLoading" vertical>
      加载中...v-else
    </van-loading> -->
        <div class="tabs-list">
            <van-list v-if="dataList.length > 0" v-model="listLoading" :finished="finished"
                :finished-text="this.qrydata.pagenum > 1 ? '到底了' : ''" @load="onLoad">
                <div class="item" v-for="item in dataList" :key="item.id" @click="openDetail(item)">
                    <div class="item-info">
                        <div class="info-name">
                            <img class="user-img" v-if="item.GENDER == '男'" src="@/assets/img/man.png" alt="">
                            <img class="user-img" v-else src="@/assets/img/woman.png" alt="">
                            <span class="title">{{ item.NAME || '-' }}</span>
                            <span class="code">{{ item.BADGE }}</span>
                        </div>
                        <div class="info-status">
                            <span :class="item.STATUS == '在职' ? 'stu1' : 'stu2'">{{ item.STATUS }}</span>
                        </div>
                    </div>
                    <div class="depart-name">
                        <span class="left">{{ item.DEPT || '-' }}</span>
                        <span class="right">
                            {{ item.JOBNAME }}
                            <span v-if="item.JOBGRADENAME">({{ item.JOBGRADENAME }})</span>
                        </span>
                    </div>
                    <div class="depart-name">
                        <span class="left">{{ item.FGS }}-{{ item.YYB }}</span>
                    </div>
                </div>
            </van-list>
            <van-empty v-else description="暂无数据" />
        </div>
        <p class="total-info" v-show="total > 0">共{{ total || 0 }}条员工信息</p>
    </div>
</template>

<script>
import Title from '@/components/commonTitle.vue'
import timePop from '@/components/timePop.vue'
import { getCaseData } from '@/api/case'
import { Toast } from 'vant'
import waterMark from '@/utils/waterMark'
import _ from 'lodash'
export default {
    name: 'profile',
    components: { Title, timePop },
    data() {
        return {
            pickerLoading: false,
            qrydata: {
                code: '80302',
                Status: '在职', // 人员状态	N	下拉备选项：在职、离职、退休
                BeginDate: '',// 入职时间（开始）	N	yyyyMMdd
                EndDate: '',// 入职时间（截止）	N	yyyyMMdd
                JuridicalPerson: '', //法人	N	字典
                Station: '', //岗位	N	字典
                PoliticalFace: '', //	政治面貌	N	下拉备选项
                Subsidiary: '', //	分/ 子公司	N	字典
                Branch: '', //营业部	N	字典
                Department: '', //	部门	N	字典
                EmpeNameNo: '', //	员工	N	
                pagenum: 0,	//起始页（从0开始）	Y	
                pagesize: 10,	//每页条数	Y	
                // sortdatafield	排序字段	N	
                // sortorder	排序方式	N	
            },
            keyword: "",
            listLoading: true,
            finished: false,
            dataList: [],
            corpList: [], // 法人
            fgsList: [], //分子公司
            yybList: [], // 营业部
            deptList: [], // 部门
            jobList: [], //岗位

            personStatusList: [
                { name: '全部', value: '' },
                { name: '在职', value: '1' },
                { name: '退休', value: '2' },
                { name: '离职', value: '-1' },
            ],
            polfaceList: [
                { name: '全部', value: '' },
                { name: '党员关系未转入', value: '党员关系未转入' },
                { name: '共青团员', value: '共青团员' },
                { name: '九三学社社员', value: '九三学社社员' },
                { name: '民革会员', value: '民革会员' },
                { name: '民建会员', value: '民建会员' },
                { name: '民进会员', value: '民进会员' },
                { name: '民盟会员', value: '民盟会员' },
                { name: '农工党党员', value: '农工党党员' },
                { name: '退党', value: '退党' },
                { name: '无党派民主人士', value: '无党派民主人士' },
                { name: '致公党党员', value: '致公党党员' },
                { name: '群众', value: '群众' },
                { name: '中共党员', value: '中共党员' },
                { name: '中共预备党员', value: '中共预备党员' }
            ],

            activePersonStatus: '1',
            activeJob: '',
            activeCorpStatus: '',
            activePolface: '',
            showName: {
                fgsname: '',
                yybname: '',
                bm: ''
            },
            coulist: [],

            // 筛选-入职时间
            entryTime: {
                start: '',
                end: ''
            },
            startTime: "2019-02-12",
            endTime: "2020-02-12",

            showPromore: false,
            showJobmore: false,
            keyword: "",
            showFilterPop: false,

            active: 'all',
            show: false,

            timer: null,
            total: 0
        }
    },
    watch: {
        keyword(val) {
            // if (this.timer) clearTimeout(this.timer)
            // this.timer = setTimeout(() => {
            //     this.dataList = []
            //     this.qrydata.pagenum = 0	//起始页（从0开始）	Y	
            //     this.qrydata.pagesize = 10	//每页条数	Y	
            //     this.total = 0
            //     this.listLoading = true
            //     this.finished = false
            //     if (!val) {
            //         this.qrydata.EmpeNameNo = ''
            //     } else {
            //         this.qrydata.EmpeNameNo = val
            //     }

            //     this.getDataList()
            // }, 1000)
        }
    },
    created() {
        this.getOptionList()
        this.dataList = []
        this.getDataList()

    },
    mounted() {
        let time = this.$moment(new Date()).format('YYYY年MM月DD日')
        let markinfo = `${time},${this.$store.state.userid}`
        waterMark.set(markinfo)
    },
    methods: {
        handleInput: _.debounce(function (event) {
            this.dataList = []
            this.qrydata.pagenum = 0	//起始页（从0开始）	Y	
            this.qrydata.pagesize = 10	//每页条数	Y	
            this.total = 0
            this.listLoading = true
            this.finished = false
            this.qrydata.EmpeNameNo = this.keyword || ''
            this.getDataList()
        }, 1000),
        onSearch() {
            this.dataList = []
            this.qrydata.pagenum = 0	//起始页（从0开始）	Y	
            this.qrydata.pagesize = 10	//每页条数	Y	
            this.total = 0
            this.listLoading = true
            this.finished = false
            this.qrydata.EmpeNameNo = this.keyword || ''
            this.getDataList()
        },
        handleProMore() {
            this.showPromore = !this.showPromore
        },
        handleJobMore() {
            this.showJobmore = !this.showJobmore
        },
        // 获取筛选条件列表
        async getOptionList() {
            const resData = await getCaseData({ code: '80301' })
            if (!resData || !resData.data) return
            this.corpList = resData.data.corpList || [] // 法人
            this.fgsList = resData.data.fgsList || [] // 分子公司
            this.deptList = resData.data.deptList || [] // 部门
            this.jobList = resData.data.jobList || [] // 岗位

            this.corpList = this.corpList.map(item => {
                item.text = item.CORPORATIONNAME
                item.value = item.CORPORATIONID
                return { ...item }
            })
            this.corpList.unshift({
                text: '全部', value: '', CORPORATIONNAME: '全部', CORPORATIONID: ''
            })

            this.fgsList = this.fgsList.map(item => {
                item.text = item.FGSNM
                item.value = item.FGSID
                item.id = item.FGSID
                item.children = [{ text: '全部', value: '', id: '' }]
                return { ...item }
            })
            this.fgsList.unshift({ text: '全部', id: '', value: '', FGSNM: '全部', FGSID: '', children: [{ text: '全部', value: '', id: '' }] })

            this.deptList = this.deptList.map(item => {
                item.text = item.BMMC
                item.value = item.BMMC
                return { ...item }
            })
            this.deptList.unshift({ text: '全部', value: '', BMMC: '' })

            this.jobList = this.jobList.map(item => {
                item.text = item.FLMC
                item.value = item.FLMC
                return { ...item }
            })
            this.jobList.unshift({ text: '全部', value: '', FLMC: '' })
        },
        onLoad() {
            this.qrydata.pagenum += 1
            this.getDataList()
        },
        async getDataList() {
            let qry = {
                ...this.qrydata
            }
            const resData = await getCaseData(qry)
            this.listLoading = false
            if (!resData || !resData.data) return
            this.total = resData.data.COUNT || 0
            if (resData.data.userPrvg == 0) {
                Toast('暂无权限访问此功能～')
                this.$router.replace({ path: '/' })
                return
            }
            this.dataList = [...this.dataList, ...resData.data.LIST]
            if (resData.data.LIST.length < this.qrydata.pagesize) {
                this.finished = true
            }
        },
        async onChangeFgs(picker, values, index) {
            let current = this.fgsList.filter(item => values[0] == item.FGSNM)
            if (current[0].FGSID == '') {
                this.fgsList[0].children = [{ text: '全部', value: '', id: '' }]
                return
            }
            const resData = await getCaseData({ code: '80301', fgsId: current[0].FGSID || '' })
            if (!resData || !resData.data) return
            this.yybList = resData.data.yybList.map(item => {
                item.text = item.YYBNM || ''
                item.value = item.YYBID || ''
                item.id = item.YYBID || ''
                item.children = []
                return { ...item }
            })
            this.yybList.unshift({ text: '全部', value: '', id: '' })
            picker.setColumnValues(index + 1, this.yybList || [])
        },
        // 分子公司
        async onSureFgs(value, index) {
            let currentFgs = this.fgsList.filter(item => value[0] == item.FGSNM)
            let currentYyb = this.yybList.filter(item => value[1] == item.YYBNM)
            let str = ''
            if (value[0] == '全部') {
                str = ''
            } else if (value[1] == '全部') {
                str = value[0]
            } else {
                str = `${value[0]}/${value[1]}`
            }
            this.showName.fgsname = str
            this.qrydata.Subsidiary = currentFgs[0].FGSID || ''
            this.qrydata.Branch = currentYyb && currentYyb.length ? currentYyb[0].YYBID : ''
            this.$refs.fgsref.toggle();
            this.qrydata.pagenum = 0	//起始页（从0开始）	Y	
            this.qrydata.pagesize = 10	//每页条数	Y	
            this.dataList = []
            this.total = 0
            this.getDataList()
        },
        onCancelFgs() {
            this.$refs.fgsref.toggle();
        },
        // 营业部
        async onSureYyb(value, index) {
            this.qrydata.pagenum = 0	//起始页（从0开始）	Y	
            this.qrydata.pagesize = 10	//每页条数	Y	
            this.total = 0
            this.dataList = []
            this.qrydata.Branch = this.yybList[index].YYBID
            this.showName.yybname = this.yybList[index].YYBID ? this.yybList[index].text : ''
            this.getDataList()
            this.$refs.yybref.toggle()
        },
        onCancelYyb() {
            this.$refs.yybref.toggle()
        },
        // 部门
        async onSureBm(value, index) {
            this.qrydata.pagenum = 0	//起始页（从0开始）	Y	
            this.qrydata.pagesize = 10	//每页条数	Y	
            this.total = 0
            this.dataList = []
            this.qrydata.Department = this.deptList[index].BMMC
            this.showName.bm = this.deptList[index].BMMC ? this.deptList[index].BMMC : ''
            this.getDataList()
            this.$refs.bmref.toggle()
        },
        onCancelBm() {
            this.$refs.bmref.toggle()
        },
        // 选择人员状态
        handleClickStatus(data) {
            this.activePersonStatus = data.value
            this.qrydata.Status = data.name == '全部' ? '' : data.name
        },
        // 选择法人
        handleCropStatus(data) {
            this.activeCorpStatus = data.value
            this.qrydata.JuridicalPerson = data.text == '全部' ? '' : data.value // 法人id
        },
        // 选择岗位
        handleClickJob(data) {
            this.activeJob = data.value
            this.qrydata.Station = data.text == '全部' ? '' : data.value
        },
        // 政治面貌
        handlePolface(data) {
            this.activePolface = data.value
            this.qrydata.PoliticalFace = data.text == '全部' ? '' : data.value
        },

        changeTime(timeVal) {
            this.entryTime = {
                start: timeVal.startTime,
                end: timeVal.endTime
            }
        },
        cancelChangeTime() { },

        handleFilter(val) {
            // console.log(val, '-----vvv----');
            this.show = true
        },

        showTimePopup() {
            this.$refs.timePop.showPop()
        },
        reset() {
            this.activePersonStatus = '1'
            this.activeJob = ''
            this.activeCorpStatus = ''
            this.activePolface = ''
            this.qrydata.Status = '在职'
            this.qrydata.JuridicalPerson = ''
            this.qrydata.Station = ''
            this.qrydata.PoliticalFace = ''

            this.coulist = []

            this.entryTime = {
                start: '',
                end: ''
            }
        },
        ok() {
            this.qrydata.pagenum = 0	//起始页（从0开始）	Y	
            this.qrydata.pagesize = 10	//每页条数	Y	
            this.total = 0
            this.listLoading = true
            this.finished = false

            this.qrydata.BeginDate = this.entryTime.start
            this.qrydata.EndDate = this.entryTime.end

            this.dataList = []
            this.getDataList()
            this.$refs.filterRef.toggle();

            if (this.activePersonStatus) {
                this.coulist.push('a')
            }
            if (this.activeJob) {
                this.coulist.push('b')
            }
            if (this.activeCorpStatus) {
                this.coulist.push('c')
            }
            if (this.activePolface) {
                this.coulist.push('d')
            }
            if (this.entryTime.start && this.entryTime.end) {
                this.coulist.push('e')
            }
            if (!this.activePersonStatus &&
                !this.activeJob &&
                !this.activeCorpStatus &&
                !this.activePolface &&
                !this.entryTime.start &&
                !this.entryTime.end) {
                this.coulist = []
            }
            this.coulist = Array.from(new Set(this.coulist))
        },

        openDetail(rowdata) {
            this.$router.push({
                path: '/profileDetail',
                query: {
                    id: rowdata.BADGE,
                    rowdata: JSON.stringify(rowdata),
                    type: 1 //员工画像
                }
            })
        }
    }
}
</script>

<style lang="less" scoped>
.page {
    height: 100%;

    .head {

        /deep/ .search {
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            height: 156px;
            padding: 0 30px;
            background: #3875c6;

            .van-search {
                padding: 0;

                .van-search__content {
                    height: 60px;

                    .van-field {
                        display: flex;
                        align-items: center;
                        justify-content: center;

                        .van-field__body {
                            height: 100%;
                        }
                    }
                }
            }

            .van-popup {
                border-radius: 30px 30px 0 0;
                // background: red;
            }

            .dropdown-menu {
                .van-dropdown-menu__title {
                    color: #fff;
                    padding: 0;
                    font-size: 28px;
                    line-height: 42px;
                    font-family: SourceHanSansCN, SourceHanSansCN;

                    &::after {
                        display: none;
                    }

                    .van-ellipsis {
                        display: flex;
                        align-items: center;
                        font-size: 28px;

                        span {
                            overflow: hidden;
                            white-space: nowrap;
                            text-overflow: ellipsis;
                        }

                        img {
                            width: 28px;
                            height: 28px;
                        }
                    }
                }

                .van-dropdown-menu__title--active {
                    color: #fff;
                }

                .branch-picker {
                    height: 550PX;

                    .van-picker__toolbar {
                        position: relative;
                        z-index: 999;
                    }

                    .van-picker__columns {
                        height: 550PX !important;
                    }

                    .van-picker__mask {
                        background-size: 100% 46% !important;
                        top: -235PX;
                        height: 133%;
                    }

                    .van-picker__frame {
                        top: 24% !important;
                    }
                }
            }

            .filter-dropdown {
                // width: 750px;
                // max-width: 750px;
                // height: 100%;
                // background: red;

                .cus-icon {
                    width: 28px;
                    height: 28px;
                }

                .icon-col {
                    color: #3975C6;
                }

                .filter-pop {
                    padding: 30px;
                    position: relative;
                    max-width: 750px;
                    height: calc(100% - 60px);
                    overflow: hidden;

                    // 筛选弹框样式
                    .filter-group {
                        height: calc(100% - 98px);
                        overflow: auto;

                        .f-item {
                            .title {
                                display: flex;
                                align-content: center;
                                justify-content: space-between;

                                .name {
                                    font-family: SourceHanSansCN, SourceHanSansCN;
                                    font-weight: 500;
                                    font-size: 28px;
                                    color: #251717;
                                    line-height: 42px;
                                }

                                .more {
                                    font-family: SourceHanSansCN, SourceHanSansCN;
                                    font-weight: 400;
                                    font-size: 26px;
                                    color: #7F8389;
                                    line-height: 40px;
                                    display: flex;
                                    align-items: center;
                                    cursor: pointer;
                                }
                            }

                            .btn-list {
                                display: flex;
                                flex-direction: row;
                                justify-content: space-between;
                                padding: 30px 0 40px;
                            }

                            .time-btn-list {
                                .van-cell {
                                    border-bottom: 2px solid #ededed;
                                    padding: 28px 0;
                                    margin-bottom: 42px;

                                    .van-cell__value {
                                        font-family: SourceHanSansCN, SourceHanSansCN;
                                        font-weight: 400;
                                        font-size: 26px;
                                        color: #7F8389;
                                    }

                                    .van-cell__right-icon {
                                        color: #c0c0c0;
                                    }

                                    &::after {
                                        border: none;
                                    }
                                }

                                .van-popup {
                                    border-radius: 30px 30px 0 0;
                                    width: 100%;
                                    height: 50%;
                                    max-height: 100%;
                                    right: 0;
                                    left: 0;
                                    bottom: 0;
                                }
                            }

                            .default-btn {
                                width: 138px;
                                height: 64px;
                                background: #F5F7FA;
                                border-radius: 32px;
                                border: 1px solid #F1F1F1;
                            }

                            .active-btn {
                                height: 64px;
                                background: rgba(57, 127, 249, 0.1);
                                border-radius: 32px;
                                border: 1px solid #397FF9;
                                color: #397FF9;
                            }

                            // 人员状态
                            .person-btn-list {
                                padding: 30px 0 40px;
                                display: flex;
                                flex-wrap: wrap;
                                justify-content: space-between;
                            }

                            .auto-w {
                                width: auto;
                                margin-bottom: 20px;
                                flex: auto;
                                margin-right: 10px;
                            }

                            .pro-list {
                                height: 210px;
                                overflow: hidden;
                            }

                            .job-list {
                                height: 42px;
                                overflow: hidden;
                            }

                            .pro-list-auto {
                                height: auto;
                                overflow: inherit;
                            }
                        }
                    }

                    .filter-btn {
                        position: absolute;
                        bottom: 0;
                        left: 0;
                        width: 100%;
                        // background: red;
                        padding-top: 18px;
                        padding-bottom: 38px;
                        display: flex;
                        justify-content: space-evenly;

                        .van-button {
                            width: 216px;
                            height: 72px;

                        }
                    }
                }

                .van-dropdown-item {
                    height: 100%;
                    top: auto;
                    position: fixed;
                    // width: 750px;
                    // max-width: 750px;
                    // margin: auto;
                    // background: #333;
                }

                .van-overlay {
                    bottom: 0;
                    top: auto;
                    width: 100%;
                    height: calc(100% - 156px);
                    // left: auto;
                    // max-width: 750px;
                }

                .van-popup {
                    border-radius: 0;
                    width: 600px;
                    // max-width: 750px;
                    height: calc(100% - 156px);
                    max-height: 100%;
                    right: 0;
                    left: auto;
                    overflow: auto;
                    // background: green;
                    // transition: none;
                    // transform: none;
                }

                .reftime-pop {
                    height: auto;
                    width: 100%;
                    border-radius: 20px 20px 0 0;
                }
            }

            .van-dropdown-menu__bar {
                height: auto;
                background: transparent;
                color: #fff;
            }
        }
    }

    .tabs-list {
        height: calc(100% - 285px);
        height: calc(100% - 320px);
        overflow: auto;
        // background: green;

        .item {
            height: 202px;
            padding: 0 30px;
            margin-top: 20px;
            background: #fff;
            display: flex;
            justify-content: space-evenly;
            flex-direction: column;
            cursor: pointer;

            .item-info {
                display: flex;
                justify-content: space-between;
                align-items: center;

                .info-name {
                    font-size: 26px;
                    line-height: 40px;
                    color: #333;
                    font-weight: 400;
                    font-family: SourceHanSansCN, SourceHanSansCN;
                    display: flex;
                    justify-content: space-between;
                    align-items: center;

                    .user-img {
                        width: 50px;
                    }

                    .title {
                        padding: 0 10px;
                    }

                    .code {
                        color: #7F8389;
                    }
                }

                .info-status {
                    font-size: 24px;
                    line-height: 36px;
                    font-family: SourceHanSansCN, SourceHanSansCN;

                    .stu1 {
                        color: #397FF9;
                    }

                    .stu2 {
                        color: #666;
                    }
                }
            }

            .depart-name {
                display: flex;
                font-family: SourceHanSansCN, SourceHanSansCN;
                font-weight: 400;
                font-size: 24px;
                color: #7F8389;
                line-height: 36px;

                .left {
                    display: inline-block;
                    margin-right: 36px;
                }
            }
        }

        .item:last-child {
            margin-bottom: 20px;
        }
    }

    .total-info {
        line-height: 40px;
        height: 40px;
        font-size: 18px;
        text-align: center;
        color: #666;
    }

    /deep/ .van-dropdown-item {
        bottom: 0 !important;
    }

    /deep/ .van-overlay {
        bottom: 0;
        top: auto;
        width: 100%;
        height: calc(100% - 156px);
    }


}
</style>